<template>
  <div>
    <span>我是父组件</span>
        <!-- <SonComponent :message="message"></SonComponent> -->
    <SonComponent 
    v-for="item in message" 
    :key="item.id"
    :uname="item.uname"
    :famliyName="item.famliyName"
    :age="item.age"
    :profess="item.profess"
    :id="item.id"
    @add="add"
    > 
    </SonComponent>

  </div>
</template>
 
<script>
import SonComponent from "./SonComponent";
export default {
  name: "FatherComponent",
  components: {
    SonComponent,
  },
  props: {},
  data() {
    return {
      message: [
        {
          id: "1",
          uname: "harry",
          famliyName: "despot",
          age: 28,
          profess: "前端",
        },
        {
          id: "2",
          uname: "志豪",
          famliyName: "陈",
          age: 17,
          profess: "测试",
        },
        {
          id: "3",
          uname: "嘉",
          famliyName: "高",
          age: 21,
          profess: "全栈",
        },
        {
          id: "4",
          uname: "涵翔",
          famliyName: "侯",
          age: 18,
          profess: "帕勒马斯",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    add(id,num){
      this.message.forEach(item=>{
      if(item.id===id){
        item.age+=num
      }
      })
    }
  },
};
</script>

<style scoped>
</style>